import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import Icon from 'react-fontawesome';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import { Link } from 'react-router-dom';
import Snackbar from 'material-ui/Snackbar';

import '../pages';

export default class Login extends Component {

  constructor(props) {
    super(props);
  
    this.state = {
      openToast: false,
      errorMessage: '请输入账号！',
      account: '',
      password: ''
    }
  }

  handleRequestClose() {
    this.setState({openToast: false})
  }

  handleAccountValue(event) {
    let curAccount = event.target.value;
    this.setState({account: curAccount});
  }

  handlePasswordValue(event) {
    let curPassword = event.target.value;
    this.setState({password: curPassword});
  }

  handleClickLoginBtn() {
    if(this.state.account == '' || this.state.account == null) {
      this.setState({
        errorMessage: '请输入账号！',
        openToast: true
      });
      return;
    }
    if(this.state.password == '' || this.state.password == null) {
      this.setState({
        errorMessage: '请输入密码！',
        openToast: true
      });
      return;
    }
    this.props.history.push('/message');
  }

  render() {
    return (
      <div className="login-bg">
        <div className="login-cover"></div>
        <div className="login-container">
          <div style={{fontSize: 26}}>
            <Icon name="qq" style={{marginRight: 10}}/>
            <span>QQ</span>
          </div>
          <TextField
            className="account-input"
            hintText="请输入账号"
            hintStyle={{color: 'rgba(255,255,255,.6)'}}
            fullWidth={true}
            style={loginStyles.inputStyles}
            onChange={this.handleAccountValue.bind(this)}
          />
          <TextField
            hintText="请输入密码"
            hintStyle={{color: 'rgba(255,255,255,.6)'}}
            fullWidth={true}
            style={loginStyles.inputStyles}
            type="password"
            onChange={this.handlePasswordValue.bind(this)}
          />
          <RaisedButton 
            label="登 录" 
            primary={true} 
            style={loginStyles.btnStyle}
            buttonStyle={{backgroundColor:'rgba(0, 188, 212, .8)'}}
            onTouchTap={this.handleClickLoginBtn.bind(this)}
          />
          <div style={loginStyles.registStyles}>
            <Link to="/forgotPassword">
              <FlatButton label="忘记密码？" primary={true}/>
            </Link>
            <Link to="/regist">
              <FlatButton label="新用户注册" primary={true}/>
            </Link>
          </div>
          <p style={loginStyles.protocolStyles}>
            登录即代表阅读并同意
            <Link to="/protocol">
              <FlatButton label="服务条款" primary={true}/>
            </Link>
          </p>
          
        </div>
        <Snackbar
          className='snackbar'
          open={this.state.openToast}
          message={this.state.errorMessage}
          autoHideDuration={2000}
          onRequestClose={this.handleRequestClose.bind(this)}
          bodyStyle={loginStyles.snackBarBody}
          contentStyle={loginStyles.snackBarContent}
        />
      </div>
    )
  }
}

const loginStyles = { 
  snackBarBody: {
    backgroundColor: '#fff',
    textAlign: 'center'
  },
  snackBarContent: {
    color: '#000'
  },
  btnStyle: {
    marginTop: 40,
    width: '100%',
    backgroundColor: 'transparent'
  },
  inputStyles: {
    marginTop: 20,
  },
  registStyles: {
    display: 'flex',
    justifyContent: 'space-between'
  },
  protocolStyles: {
    position: 'absolute',
    bottom: 20,
    left: 0,
    fontSize: 14,
    textAlign: 'center',
    width: '100%'
  }
}
